<template>
  <!-- status是0,1,2 进度条什么都不显示 -->
    <view class="top2" v-if="item?.status == 0 || item?.status == 1 || item?.status == 2">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span"></view>
      </view>
      <view class="text03">
        <view class="span"></view>
        <view class="span"></view>
        <view class="span"></view>
        <view class="span"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <!-- status 为3 只显示初稿-->
    <view class="top2" v-if="item?.status == 3">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span"></view>
        <view class="span"></view>
        <view class="span"></view>
        <view class="span"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <view class="top2" v-if="item?.status == 4">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span spanHover"></view>
        <view class="span"></view>
        <view class="span"></view>
        <view class="span"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <view class="top2" v-if="item?.status == 5">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span"></view>
        <view class="span"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <view class="top2" v-if="item?.status == 6">
     <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
     <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <view class="top2" v-if="item?.status == 7">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
      </view>
      <view class="text04">
        <view class="span"></view>
      </view>
    </view>
    <view class="top2" v-if="item?.status == 8">
      <view class="text" v-if="pageType !== 'teacher'">{{item?.order_no}}</view>
      <view class="text01" v-if="pageType !== 'teacher'">{{item?.name}}</view>
      <view class="text02">
        <view class="span spanHover"></view>
      </view>
      <view class="text03">
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
        <view class="span spanHover"></view>
      </view>
      <view class="text04">
        <view class="span spanHover"></view>
      </view>
    </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    pageType: {
      type: String,
    }
  },
  computed: {
  }
};
</script>

<style scoped lang="scss">
.top2{
  width: 650rpx;
  height: 64rpx;
  border-radius: 6rpx;
  background: rgba(209, 243, 241, 1);
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-family: HarmonyOS Sans SC;
  font-weight: 400;
  font-size: 20rpx;
  text-align: center;
  .text{
    width: 116rpx;
  }
  .text01{
    width: 200rpx;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .text02{
    width: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .span{
      width: 28rpx;
      height: 26rpx;
      border-radius: 6rpx;
      border: 2rpx solid rgba(11, 105, 218, 1);
    }
    .spanHover{
      background: rgba(28, 246, 21, 1);
    }
  }
  .text03{
    width: 240rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .span{
      width: 28rpx;
      height: 26rpx;
      border-radius: 6rpx;
      border: 2rpx solid rgba(11, 105, 218, 1);
      margin-right:6rpx;
    }
    .spanHover{
      background: rgba(28, 246, 21, 1);
    }
  }
  .text04{
    width: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .span{
      width: 28rpx;
      height: 26rpx;
      border-radius: 6rpx;
      border: 2rpx solid rgba(11, 105, 218, 1);
    }
    .spanHover{
      background: rgba(28, 246, 21, 1);
    }
  }
}
</style>